<template>
    <t-modal title="回收站" :width="800" :visible="visible" @cancel="handleCancel" destroyOnClose>
        <tool-bar @search="$refs.table.refresh(true)" @reset="
                () => {
                    (queryParam = {}), $refs.table.refresh(true);
                }
            ">
            <template slot="toolBtn" slot-scope="scope">
                <a-button class="cu-btn-primary" icon="reset"
                    @click="handleUser('resumeUser')">恢复用户</a-button>
                <a-button class="cu-btn-danger" type="link" @click="handleUser('completelyDelete')">彻底删除</a-button>
            </template>
            <template slot="toolForm">
                <a-form-item label="账号">
                    <a-input v-model="queryParam.userNameId" placeholder="账号" />
                </a-form-item>
                <a-form-item :label="$ct('fullName','姓名')">
                    <a-input v-model="queryParam.userName" :placeholder="$ct('fullName','姓名')" />
                </a-form-item>
            </template>
        </tool-bar>
        <div class="page-common-sub-box">
            <s-table ref="table" :columns="columns" rowKey="uuid" :data="loadData" :rowSelection="rowSelection"
                :scroll="scrollXY">
                <span slot="serial" slot-scope="text, record, index">
                    {{ index + 1 }}
                </span>
                <span slot="renderUserSex" slot-scope="text">
					{{ text | sexFilter }}
				</span>
                <span slot="renderUserHeadPortrait" slot-scope="text">
                    <img
                    :src="text"
                    alt=""
                    class="business-license"
                    @click="preViewHeadPortrait(text)"
                    />
                </span>
            </s-table>
        </div>
        <template slot="footer">
            <a-button @click="handleCancel">关闭</a-button>
        </template>
        <preview-image
			:visible.sync="visibleViewImg"
			:imgSrc="imgSrc"
		></preview-image>
    </t-modal>
</template>

<script>
import {
    STable
} from "@/components";
import previewImage from "@/components/TopVUI/custom/previewImage.vue";

export default {
    name: "rolePopup",
    components: {
        STable,
        previewImage
    },
    props: {
        visible: {
            type: Boolean,
        }
    },
    data() {
        return {
            queryParam: {},
            columns: [{
                title: "#",
                align: "center",
                width: 50,
                scopedSlots: {
                    customRender: "serial",
                }
            },{
				title: "头像",
				align: "center",
				dataIndex: "userHeadPortrait",
				scopedSlots: {
					customRender: "renderUserHeadPortrait",
				},
				width: 100
			},{
                title: "账号",
                align: "center",
                dataIndex: "userNameId",
                width: 150
            },{
                title: "姓名",
                align: "center",
                dataIndex: "userName",
                langCode: "fullName",
                width: 150
            },{
                title: "性别",
                align: "center",
                dataIndex: "userSex",
                scopedSlots: {
                    customRender: "renderUserSex",
                },
                width: 80
            },{
            	title: "所属组织",
            	align: "center",
            	dataIndex: "orgName",
            	langCode: "null",
            	width: 150
            }],
            loadData: (parameter) => {
                const requestParameters = Object.assign({}, parameter, this.queryParam);
                return this.$post("/mdata/user/getPageSetUserByUserStatus", requestParameters).then(
                    (res) => {
                        if (res.statusCode === 200) {
                            return res.data.rows;
                        }
                    }
                );
            },
            selectedRowKeys: [],
            selectedRows: [],
            subHeight: 0,
            visibleViewImg: false,
            imgSrc: ""
        };
    },
    computed: {
        rowSelection() {
            return {
                selectedRowKeys: this.selectedRowKeys,
                onChange: this.onSelectChange,
            };
        },
        scrollXY() {
            let subHeight = this.subHeight ? this.subHeight : 400
            let height = subHeight - 250
            return { y: height, x: '100%' };
        },
    },
    filters: {
        sexFilter(sex) {
            const sexMap = {
                "UserSex.01": "男",
                "UserSex.02": "女",
                "UserSex.03": "未知"
            };
            return sexMap[sex];
        },
    },
    watch: {

    },
    created() {
        this.$nextTick(() => {
            this.subHeight = document.getElementsByClassName("page-common-sub-box")[0]?.clientHeight;
        })
    },
    methods: {
        handleCancel(){
            this.$emit("cancel")
        },
        handleUser(e){
            const that = this;
            let url = "";
            let content = "";
            if(!that.selectedRowKeys.length){
                return this.$message.warn("请先勾选需要操作的数据！",1.5);
            }
            if(e === "resumeUser"){
                url = "/mdata/user/resumeSysUser";
                content = "确定恢复勾选的用户吗";
            }else{
                url = "/mdata/user/thoroughDeleteSysUser";
                content = "确定删除勾选的用户吗";
            }
            that.$confirm({
                title: that.$ct("tips","提示"),
                content: content,
                okText: that.$ct("confirm","确定"),
                cancelText: that.$ct("cancel","取消"),
                closable: true,
                icon: () => that.$createElement('a-icon', {
                    props: {
                        key: 'warning',
                        type: 'exclamation-circle',
                        twoToneColor: '#faad14'
                    }
                }),
                onOk() {
                    return new Promise((resolve, reject) => {
                        that.$post(url, {uuid: that.selectedRowKeys.toString()}).then(res => {
                            if(res.statusCode === 200){
                                that.$message.success(res.message, 1.5);
                                that.$refs.table.refresh();
                                that.$emit("refresh");
                                resolve();
                            }else{
                                that.$message.error(res.message, 1.5);
                                reject();
                            }
                            that.selectedRowKeys = [];
                            that.selectedRows = [];
                        })
                    });
                }
            })
        },
        onSelectChange(selectedRowKeys, selectedRows){
            this.selectedRowKeys = selectedRowKeys;
            this.selectedRows = selectedRows;
        },
        preViewHeadPortrait(val) {
			this.imgSrc = val;
			this.visibleViewImg = true;
		}
    },
};
</script>

<style lang="less" scoped>
    .page-common-sub-box{
        max-height: 400px !important;
        height: calc(100vh - 400px) !important;
    }
    .business-license{
		cursor: pointer;
		padding: 5px;
		height: 36px !important;
		width: 36px !important;
	}
</style>
